<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css">
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <script src="/static/layui/layui.js"></script>
  <script src="/static/jquery-3.6.3.min.js"></script>
  <script src="/static/fun.js"></script>
</head>
<style>
  .card{
    overflow: hidden;
  }
  .card .title{
    white-space: nowrap;
  }
  .card span{
    white-space: nowrap;
  }
  .notice {
    width:20px;
    height:20px;
    line-height:20px;
    font-size:10px;
    color:#fff;
    text-align:center;
    background-color:#f00;
    border-radius:50%;
    position:absolute;
    right:5px;
    top:5px;
    font-weight: bold;
  }
</style>
<style>
  html,body{ height: 100%;margin: 0; padding: 0;}
</style>
<script>
  var JWT
  $(document).ready(function (){
    JWT = getCookie('Token');
    if (window["WebSocket"]) {
      initWebSocket(JWT)
    } else {
      console.log("WebSockets Not Support.")
    }
  })
  //全局的WebSocket连接，用于接收消息
  //ReceptionMsg 累计消息修改html
  $(document).ready(function (){
    if (window["WebSocket"]) {
      var conn = websocketConn
      conn.onmessage = function(evt) {
        var data = JSON.parse(evt.data);
        if (data.type=="msg"||data.type=="pic"||data.type=="booking"){
          ReceptionMsg(data)
          //把消息该为未读，发送到服务器
          data.type="Unread"
          var jsonStr = JSON.stringify(data);       //转为JSON字符串
          conn.send(jsonStr);
        }else if (data.type=="exit"){
          console.log(data.content)
          $("#"+data.content).find("#layim-chat-img-state").attr("class","layim-chat-state-offline")
        }else if (data.type=="login"){
          console.log(data.content)
          $("#"+data.content).find("#layim-chat-img-state").attr("class","layim-chat-state-online")
        }
      }
    } else {
      console.log("0000")
    }
    checkAllOnline()
  })
  function checkAllOnline(){
    $.ajax({
      method: "post",
      url: "/public/client/ReturnOnline",
      dataType:'JSON',
      async:false,
      success: function(res) {
        $.each(res.OnlineList, function(index, item) {
          $("#"+item).find("#layim-chat-img-state").attr("class","layim-chat-state-online")
        });
      },
    });
  }
</script>
<body>
{{ template "base" . }}
</body>

</html>